<template>
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="http://image.howzhi.com/system/block_picture_1470403193.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="http://image.howzhi.com/system/block_picture_1468976358.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="http://image.howzhi.com/system/block_picture_1557396082.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="a-hidden carousel-control-prev" href="#carouselExampleSlidesOnly" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="a-hidden carousel-control-next" href="#carouselExampleSlidesOnly" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  setup () {
    onMounted(() => {
      const container = document.querySelector('#carouselExampleSlidesOnly')
      const arrow1 = container.childNodes[1]
      const arrow2 = container.childNodes[2]
      function onMouseEnter () {
        arrow1.classList.remove('a-hidden')
        arrow2.classList.remove('a-hidden')
      }
      function onMouseLeave () {
        arrow1.classList.add('a-hidden')
        arrow2.classList.add('a-hidden')
      }
      container.addEventListener('mouseenter', onMouseEnter)
      container.addEventListener('mouseleave', onMouseLeave)
    })
  }
}
</script>

<style lang="scss" scoped>
.carousel {
  .carousel-control-prev {
    background-color: gray;
    top: 50% !important;
    left: 5%;
    height: 45px !important;
    transform: translateY(-50%);
    width: 3%;
  }
  .carousel-control-next {
    background-color: gray;
    top: 50% !important;
    height: 45px !important;
    transform: translateY(-50%);
    right: 5%;
    width: 3%;
  }
  .a-hidden {
    display: none;
  }
}
</style>
